import React from 'react'
import {Modal, Form} from 'antd'
import {quizType} from '../../../constant/quiz-type'
import {previewModalStyle} from '../../../constant/constant-style'
import MultipleChoice from './multiple-choice'
import BlankQuiz from './blank-quiz'
import SingleChoice from './single-choice'
import CodingQuiz from './coding-quiz'
import OnlineCodingQuiz from './online-coding-quiz'
import OnlineLanguageQuiz from './online-language-quiz'
import LogicQuiz from './logic-quiz'
import {FormattedMessage} from 'react-intl'
import {convertContent} from '../../../constant/lang-util'
import SubjectiveQuiz from './subjective-quiz'

const MAP_COMPONENT = {
  'MULTIPLE_CHOICE': MultipleChoice,
  'BASIC_BLANK_QUIZ': BlankQuiz,
  'SINGLE_CHOICE': SingleChoice,
  'CODING_QUIZ': CodingQuiz,
  'ONLINE_CODING_QUIZ': OnlineCodingQuiz,
  'ONLINE_LANGUAGE_QUIZ': OnlineLanguageQuiz,
  'LOGIC_QUIZ': LogicQuiz,
  'SUBJECTIVE_QUIZ': SubjectiveQuiz
}

const PreviewModal = ({quiz, visible, closeModal, type}) => {
  const RenderComponent = MAP_COMPONENT[type]
  return (
    <Modal
      title={<span><FormattedMessage id='预览' />{convertContent(quizType[type])}</span>}
      visible={visible}
      footer={null}
      onCancel={closeModal}
      width={1000}
    >
      <Form>
        {
          type === 'LOGIC_QUIZ'
          ? ''
          : <Form.Item {...previewModalStyle} label={<FormattedMessage id='标签' />}>
            <span>{quiz.tags}</span>
          </Form.Item>
        }

        {RenderComponent
          ? <RenderComponent
            quiz={quiz}
            FormItem={Form.Item}
            formItemLayout={previewModalStyle} />
          : ''}
      </Form>
    </Modal>
  )
}

export default Form.create()(PreviewModal)
